<template>
	<view>
		<u-search placeholder="请输入" v-model="keyword"  @search="sear()" ></u-search>
		
		 <u-sticky bgColor="#fff">
		    <u-tabs :list="daat" @click='onclick' ></u-tabs>
		  </u-sticky>
		<view class="xxq">
			<navigator  v-for="item in list" style="width: 180px;" :key="item.id"  :url="`/pages/xqy/xqy?id=${item.id}`">
					<u--image :showLoading="true"  :src="item.coverImage" width="170px" height="330px" style="border: 5px saddlebrown solid;"    ></u--image>
					<view >
						名字：{{item.name}}  
					</view>
					<view >
						<span style="color: red;" >价格：</span>{{item.price}} <span>￥</span>
					</view>
					
			</navigator >
			
		</view>
		<u-popup :show="show" mode="top"  @close="close" @open="open">
		        <view>
		            <text>暂时没有内容</text>
		        </view>
			</u-popup>
		
		
		
	</view>
</template>

<script>
	import {
		getIllnesssAPI,
		getMedicineAPIs,
		getMedicineCategoryAPI,
		getMedicineAPIIs
	} from "../../services/api.js"
	import {
		dalImg
	} from "../../utils/tools.js"
	export default {
		data() {
			return {
				aaa:false,
				keyword: "",
				show: false,
				data: [

				],
				list: [],
				daat:[
					
				],
				
				userInfo: {
					page: "1",
					per: "10"
				},
				userInf: {
					page: "1",
					per: "10"
				},
				dat:{
					keyword:'',
					page: "1",
					per: "10"
				},
				pae:"0",


			}

		},
		methods: {
			sear(){
				console.log(this.keyword);
				this.dat.keyword=this.keyword
				getIllnesssAPI(this.dat).then((res)=>{
					this.list=[]
					this.list = res.data.list.map((item) => ({
						...item,
						coverImage:dalImg(item.image)
					}))
					console.log(res);
				})
				
			},
			leas() {
				getMedicineAPIs(this.userInf).then((res) => {
							console.log(res);
							this.list = res.data.list.map((item) => ({
								...item,
								coverImage:dalImg(item.image)
							}))
							console.log(this.list);
						})
					
					},
			last(){
				getMedicineCategoryAPI().then((res)=>{
					//console.log(res);
						
					this.daat=res.data
					this.daat.unshift({name:"全部",id:"2"})
					console.log(this.daat);
				
				})	
				
			}	,	
					onReachBottom(){
						console.log("到底了");
						// this.userInf.page++
						if(this.list.length>=10){
							this.userInf.per++
							this.leas()
						}
							
					},
			onclick(item){
				console.log(item.id);
				
				 if (item.id!=2) {
					 console.log('ok');					
					 getMedicineAPIIs(item.id,this.userInfo).then(res=>{
					         console.log(res);
							 this.list=[]
							 this.list = res.data.list.map((item) => ({
							 	...item,
							 	coverImage:dalImg(item.image)
							 }))
							 console.log(this.list);
							 if(this.list.length==0){
								  this.show = true
							 }		 
				 })
				
			}	if(item.id==2){
				this.list=[]
				this.leas()
				
				
				
			}	
			},
			 close() {
			        this.show = false
			        // console.log('close');
					
			      }
				 
				},	
					
		onLoad() {
			
		this.leas()
		this.last()
			},
			}
</script>

<style>
	.xxq{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		
		
		
		
	}

</style>